<script setup>
import { onMounted, ref, defineAsyncComponent } from 'vue'
import getRequest, { downloadFiles } from '../utils/lxw_request';
const props = defineProps(['log'])


const my_submission_ref = ref(null)

const hasExpand = ref(false)
const isExpand = ref(false)
function expand() {
    isExpand.value = !isExpand.value
    if (isExpand.value) {
        my_submission_ref.value.style.height = my_submission_ref.value.scrollHeight + 'px';
    } else {
        my_submission_ref.value.style.height = ''
    }
}

const date = new Date(props.log.commitDate);

onMounted(() => {
    if (my_submission_ref.value.scrollHeight > my_submission_ref.value.clientHeight) {
        hasExpand.value = true
    }
})

function downloadPackage() {
    getRequest(`/stu/course/logs/${props.log['logId']}/files`, "GET")
        .then(res => res.blob())
        .then(blob => {
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.download = "日志文件压缩包.zip";
            a.click();
            URL.revokeObjectURL(url);

        })
        .catch((err) => {
            console.error(err);
        })
}

// sub Modal
const isOpenModal = ref(false);
const modal_name = ref("");
const LogModificationModal = defineAsyncComponent(() => import('./LogModificationModal.vue'))


function openModal(name) {
    modal_name.value = name;
    isOpenModal.value = true;
}


</script>
<template>
    <div class="history-submission-item">
        <div>{{`${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日  ${new Intl.DateTimeFormat("zh-CN", {weekday: 'long'}).format(date)}`}}</div>
        <div class="item-content">
            <p class="my-submission" ref="my_submission_ref" v-html="props.log.text" >
                
            </p>
            <div class="expand"  >
                <span @click="expand" >展开</span>
            </div>
            <p class="title" >附件<span class="package" @click="downloadPackage" >(全部打包下载)</span></p>
            <div class="appendix-file">
                <ul>
                    <li v-for="file in props.log.files"><span class="file-link" @click="downloadFiles(file['fileId'], file['fileName'])" >{{ file['fileName'] }}</span></li>

                </ul>
            </div>
            <p class="title" >评价</p>
            <p class="evalution" >
                {{ props.log.teacherComment }}  
            </p>
            <div class="footer" >
                <div class="button" @click="openModal('log_modification')" >编辑日志</div>
            </div>
        </div>
        <LogModificationModal  v-if="isOpenModal && modal_name == 'log_modification'"  v-model:is-open-modal="isOpenModal" :log="props.log" />

    </div>


</template>
<style scoped>
.history-submission-item .item-content {
    width: 650px;
    background-color: #e4e7ed;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    padding: 8px;
}

.history-submission-item .item-content p {
    font-family: Source Han Sans CN;
    font-size: 14px;
    line-height: 24px;
    color: #707070;

}

.history-submission-item .item-content .my-submission {
    height: 46px;
    overflow-y: hidden;
}

.history-submission-item .item-content .expand {
    display: flex;
    align-items: center;
    justify-content: end;
}

.history-submission-item .item-content .expand span {
	font-family: Source Han Sans CN;
	font-size: 12px;
	color: #8493a6;
    cursor: pointer;
    user-select: none;
}

.history-submission-item .item-content .title {
    font-family: Source Han Sans CN;
	font-size: 16px;
	color: #707070;
    font-weight: bold;
}

.history-submission-item .item-content .title::after {
    content: ': ';
}

.package {
    display: inline-block;
    text-decoration: underline;
    color: #409EFF;
    cursor: pointer;
}

.package:hover {
    color:  #337ecc;
}

.history-submission-item .item-content .appendix-file {
    height: 200px;
    border: 1px solid #707070;
    padding: 12px;
    overflow: auto;
    margin-bottom: 25px;
}


.history-submission-item .item-content .appendix-file>ul>li {
    list-style: none;
    height: 32px;

}

.history-submission-item .item-content .appendix-file>ul>li::before {
    content: url("/src/assets/images/student/file.svg");
    vertical-align: middle;
}

.file-link {
    display: inline-block;
    text-decoration: underline;
    color: #0000EE;
    cursor: pointer;
    opacity: 0.7;
}

.file-link:hover {
    opacity: 1;
}

.file-link:visited {
    color: #872bff;
}

.history-submission-item .item-content .evalution {
    background-color: #ffffff;
    padding: 0 4px;
    margin-bottom: 10px;
}

.footer {
    display: flex;
    justify-content: end;
    align-items: center;
}

.button {
    width: 100px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    background-color: #8394a6;
    color: #ffffff;
    opacity: 1;
    text-align: center;
    border-radius: 10px;
    user-select: none;
    letter-spacing: 1px;
    margin: 0 10px;
}

.button:hover {
    opacity: 0.8;
}

.button:active {
    transform: translateY(3px);
}
</style>